<template>
  <div class="userlist">
    <el-button size="small" type="primary" @click="add">添加管理员+</el-button>
    <el-drawer v-model="drawer" title="I am the title" :with-header="false">
      <el-form :model="form">
        <el-form-item prop="adminname">
          <el-input v-model="form.adminname" placeholder="用户名" />
        </el-form-item>
        <!-- ---------密码框------------- -->
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            placeholder="密码"
            type="password"
            show-password
          />
        </el-form-item>
        <!-- ------------下拉框------------- -->
        <el-form-item prop="password">
          <el-select v-model="form.role" placeholder="请选择角色">
            <el-option :value="1" label="管理员" />
            <el-option :value="2" label="普通用户" />
          </el-select>
        </el-form-item>
      </el-form>
      <!-- ----------------------树状菜单---------------------- -->
      <el-tree
        :data="treeData"
        show-checkbox
        :props="pps"
        node-key="label"
        ref="mytree"
        default-expand-all
        :default-checked-keys="defaultCheckedKeys"
      />
      <!-- -----------------------确定取消框----------------- -->
      <template #footer>
        <div style="flex: auto">
          <el-button @click="reset">取消</el-button>
          <el-button type="primary" @click="addok" v-if="num === 1"
            >添加</el-button
          >
          <el-button type="primary" @click="adminupdateOk" v-if="num === 2"
            >修改</el-button
          >
        </div>
      </template>
    </el-drawer>

    <!-- ----------------------内容-------------------- -->
    <el-table
      :data="pageList"
      style="width: 100%"
      :fit="true"
      :highlight-current-row="true"
    >
      <el-table-column
        type="index"
        label="序号"
        width="150px"
        min-width="1"
        align="center"
      />
      <el-table-column
        prop="adminname"
        label="姓名"
        min-width="1"
        align="center"
      />
      <el-table-column
        prop="adminname"
        label="权限"
        min-width="1"
        align="center"
      >
        <template #default="scope">
          <el-tag :type="scope.row.role === 1 ? '' : 'success'">{{
            scope.row.role === 1 ? "管理员" : "普通用户"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="操作" min-width="1" align="center">
        <template #default="scope" background="red">
          <el-button size="small" @click="adminupdate(scope.row)"
            >修改</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="adminDelete(scope.row.adminid)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- ----------------------分页器-------------------- -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="tableData.length"
      v-model:current-page="page"
      hide-on-single-page
    />
  </div>
</template>

<script>
import { getAdminList, addAdmin, addDelete, Update } from "../../service/admin";
import { ElMessage } from "element-plus";
import { routes } from "../../router/index.js";
export default {
  methods: {
    // 获取用户选中的节点
    getSelecedtNodes() {
      // 找到选中的字节的
      let list = this.$refs.mytree.getCheckedNodes(true);
      const temp = [];
      const result = [];
      // 更具选中的字节的找到对应的父节点
      list.forEach((item) => {
        let parentNode = this.treeData.find((item1) => {
          return item1.children.some((item2) => item2.label === item.label);
        });
        if (!temp.includes(parentNode.label)) {
          temp.push(parentNode.label);
          result.push({
            path: parentNode.path,
            label: parentNode.label,
            children: [item],
          });
        } else {
          result
            .find((ritem) => ritem.label === parentNode.label)
            .children.push(item);
        }
      });
      this.form.checkedKeys = result;
    },
    // 确定添加用户
    addok() {
      if (
        this.form.adminname === "" ||
        this.form.password === "" ||
        this.role === ""
      ) {
        ElMessage({
          message: "内容不能为空",
          type: "error",
          duration: 1000,
        });
      } else {
        this.getSelecedtNodes();
        addAdmin(this.form).then((res) => {
          this.getList(res);
          // 设置当前选中向为空
          this.$refs.mytree.setCheckedKeys([]);
        });
        this.reset();
      }
    },
    // 添加用户
    add() {
      // 设置默认选中的节点
      if (this.$refs.mytree) {
        this.$refs.mytree.setCheckedKeys([]);
      }
      this.num = 1;
      this.reset();
      this.drawer = true;
    },
    // 修改
    adminupdate(info) {
      this.form.adminname = info.adminname;
      this.form.password = info.password;
      this.form.role = info.role;
      this.num = 2;
      this.drawer = true;
      if (this.$refs.mytree) {
        this.$refs.mytree.setCheckedKeys([]);
      }
      let arr = [];
      info.checkedKeys.forEach((item) => {
        if (item.children) {
          item.children.forEach((item1) => arr.push(item1.label));
        }
      });
      this.defaultCheckedKeys = arr;
    },
    // 确定修改
    adminupdateOk() {
      this.getSelecedtNodes();
      Update(this.form).then((res) => {
        this.getList();
        this.reset();
      });
    },
    // 重置/取消
    reset() {
      this.drawer = false;
      this.form.adminname = "";
      this.form.password = "";
      this.form.role = "";
      this.form.checkedKeys = "";
    },
    // 删除
    adminDelete(id) {
      addDelete(id).then((res) => {
        this.getList();
      });
    },
    // 获取数据
    getList() {
      getAdminList().then((res) => {
        this.tableData = res.data;
      });
    },
  },
  computed: {
    pageList() {
      return this.tableData.slice((this.page - 1) * 10, this.page * 10);
    },
    treeData() {
      return JSON.parse(JSON.stringify(routes[1].children));
    },
  },

  data() {
    return {
      // 设置默认选中项
      defaultCheckedKeys: [],
      pps: {
        label: "label",
        children: "children",
      },
      num: 0,
      drawer: false,
      page: 1,
      tableData: [],
      form: {
        adminname: "",
        password: "",
        role: "",
        checkedKeys: [],
      },
    };
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped>
.userlist {
  margin-top: 20px;
}
.el-pagination {
  display: flex;
  justify-content: center;
}
</style>
